<template>
  <div class="PersonalInformation">
    <div class="header"><p>个人信息</p></div>
    <el-divider border-style="dashed" />
    <div class="bottom">
      <div>
        <p>用户名</p>
        <el-input v-model="userList.name" style="width: 460px; height: 40px" placeholder="用户名" />
      </div>
      <div>
        <p>性别</p>
        <el-radio-group v-model="userList.gender" style="width: 460px; height: 40px">
          <el-radio value="1" size="large">男</el-radio>
          <el-radio value="2" size="large">女</el-radio>
        </el-radio-group>
      </div>
      <div>
        <p>出生日期</p>
        <el-input
          v-model="userList.birthday"
          style="width: 460px; height: 40px"
          placeholder="出生日期"
        />
      </div>
      <div>
        <p>电子邮箱</p>
        <el-input
          v-model="userList.Email"
          style="width: 460px; height: 40px"
          placeholder="电子邮箱"
        />
      </div>
      <div>
        <p>电话</p>
        <el-input
          v-model="userList.telephone"
          style="width: 460px; height: 40px"
          placeholder="电话"
        />
      </div>
      <div>
        <p>手机</p>
        <el-input
          v-model="userList.mobilePhone"
          style="width: 460px; height: 40px"
          placeholder="手机"
        />
      </div>
    </div>
    <el-button class="button" @click="save">保存</el-button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const userList = ref({
  name: '',
  gender: '1',
  birthday: '',
  Email: '',
  telephone: '',
  mobilePhone: ''
})
const save = () => {
  console.log(userList)
}
</script>

<style scoped lang="less">
.PersonalInformation {
  .header {
    padding: 30px 30px 0 30px;
    p {
      font-size: 18px;
      font-weight: 700;
      color: #196adc;
    }
  }
  .bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    div {
      display: flex;
      width: 600px;
      margin: 8px 0;
      height: 50px;
      line-height: 50px;
      p {
        width: 100px;
        text-align: right;
        margin-right: 40px;
      }
    }
  }
  .button {
    margin: 30px 480px;
  }
}
</style>
